<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-11-09 10:32:49
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-19 21:35:35
 * @Description: 应用配置
 -->
<template>
  <div
    id="auth"
    style="min-width: 704px; height: 100%"
  >
    <fks-query-page
      v-loading="loading"
      :table-name="LANG.MESSAGE_LIST"
      :data="list"
      :total="total"
      :page-size.sync="pageSize"
      :current-page.sync="currentPage"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[20, 50, 100]"
      :element-loading-text="LANG.LOADING"
      @query="getList()"
      @clear="clear"
    >
      <template slot="search">
        <fks-search-item :label="LANG.MESSAGE_TITLE">
          <fks-input v-model="searchParams.msgSendTitle" />
        </fks-search-item>
        <fks-search-item :label="LANG.MESSAGE_TYPE">
          <fks-select
            v-model="searchParams.msgSendType"
            style="width: 100%"
            :placeholder="LANG.PLEASE_SELECT"
            @change="getList()"
          >
            <fks-option
              v-for="item in msgTypes"
              :key="item.code"
              :label="item[$lang]"
              :value="item.code"
            />
          </fks-select>
        </fks-search-item>
        <fks-search-item :label="LANG.SEND_STATUS">
          <fks-select
            v-model="searchParams.status"
            style="width: 100%"
            :placeholder="LANG.PLEASE_SELECT"
            clearable
          >
            <fks-option
              v-for="item in msgSendStatus"
              :key="item.value"
              :label="item[$lang]"
              :value="item.code"
            />
          </fks-select>
        </fks-search-item>
        <fks-search-item
          :label="LANG.SENDING_TIME"
          :span="12"
        >
          <fks-time-span-pick
            value-format="yyyy-MM-dd HH:mm:ss"
            :start-time.sync="searchParams.startDate"
            :end-time.sync="searchParams.endDate"
          />
        </fks-search-item>
      </template>
      <template>
        <fks-table-column
          type="index"
          align="center"
          label="#"
        />
        <fks-table-column
          :label="LANG.MESSAGE_TITLE_TABLE"
          prop="msgTitle"
          header-align="center"
          min-width="100px"
        />
        <fks-table-column
          :label="LANG.MESSAGE_TYPE_TABLE"
          prop="msgSendTypeFaker"
          header-align="center"
          min-width="100px"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.msgSendTypeFaker | transferEnum('msgSendType') }}
            </div>
          </template>
        </fks-table-column>
        <fks-table-column
          :label="LANG.SENDING_TIME_TABLE"
          prop="sendTime"
          header-align="center"
          min-width="120px"
        >
          <template slot-scope="scope">
            {{
              scope.row.sendTime
                ? $dayjs(scope.row.sendTime).format('YYYY-MM-DD HH:mm:ss')
                : ''
            }}
          </template>
        </fks-table-column>
        <fks-table-column
          prop="status"
          :label="LANG.RECEIVING_STATUS"
          min-width="100"
        >
          <div slot-scope="scope">
            <fks-tag v-if="scope.row.status === 0">
              {{ LANG.SENDING }}
            </fks-tag>
            <fks-tag
              v-if="scope.row.status === 1"
              type="success"
            >
              {{ LANG.SENDING_SUCCEEDED }}
            </fks-tag>
            <fks-tag v-if="scope.row.status === 2">
              {{ LANG.SENDING_FAILED }}
            </fks-tag>
            <fks-tag v-if="scope.row.status === 3">
              {{ LANG.PARTIAL_FAILURE }}
            </fks-tag>
          </div>
        </fks-table-column>
        <fks-table-column
          :label="LANG.OPERATION"
          min-width="80"
        >
          <template slot-scope="scope">
            <fks-button
              v-permission="['msgQuery:view']"
              type="text"
              @click="view(scope.row)"
            >
              {{ LANG.VIEW }}
            </fks-button>
          </template>
        </fks-table-column>
      </template>
    </fks-query-page>
    <message-detail
      v-if="visible"
      :visible.sync="visible"
      :data.sync="msgData"
      :msg-type="searchParams.msgSendType"
      @close="visible = false"
    />
  </div>
</template>

<script>
import MessageDetail from './MessageDetail'
import { getTenantList, getMsgList } from './api.js'

export default {
  name: 'MessageQuery',
  components: {
    MessageDetail
  },
  data() {
    return {
      loading: false,
      visible: false,
      showSubject: false,
      msgData: {},
      list: [],
      msgList: [],
      searchParams: {
        msgSendType: '0',
        msgSendTitle: '',
        status: '',
        startDate: '',
        endDate: ''
      },
      currentPage: 1,
      total: 0,
      pageSize: 20
    }
  },
  computed: {
    msgTypes() {
      return this.$store.state.enum.msgSendType
    },
    msgSendStatus() {
      return this.$store.state.enum.msgSendStatus
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    /**
     * @description: 根据服务器id获得名称
     */
    getTenantNameById(tenantId) {
      for (let item of this.tenantList) {
        if (item.tenantId == tenantId)
          return item.tenantName ? item.tenantName : tenantId
      }
      return tenantId
    },
    clear() {
      this.searchParams = {
        msgSendType: '0',
        msgSendTitle: '',
        status: '',
        startDate: '',
        endDate: ''
      }
      this.currentPage = 1
      this.getList()
    },
    view(val) {
      this.msgData = val
      this.visible = true
    },
    /**
     * @description: 获取初始数据
     */
    getList() {
      this.loading = true
      let params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchParams
      }
      getMsgList(params)
        .then((res) => {
          this.loading = false
          if (res.status) {
            this.showSubject =
              this.searchParams.msgSendType === '2' ? true : false
            this.list = res.data.list.map((item) => {
              return {
                ...item,
                msgSendTypeFaker: this.searchParams.msgSendType
              }
            })
            this.total = res.data.total
          }
        })
        .catch(() => {
          this.loading = false
          this.list = []
        })
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .fks-query-list-name {
  height: 24px !important;
}
</style>
